<template>
  <div class="app-container">
    <div class="app-container-main">
      <div class="main-card-header">
        全部线索
      </div>
      <div class="main-card-body">
        <div class="list-search">
          <div class="select-inp">
            <div>
              <a-select v-model:value="searchlist.input_inner" @change="handleSearchChange" style="width:100px">
                <a-select-option value='线索名称'>线索名称</a-select-option>
                <a-select-option value='手机号码'>手机号码</a-select-option>
              </a-select>
            </div>
            <a-input-search v-model:value="searchlist.search_value" placeholder="请输入搜索内容"
              style="width: 230px;height: 32px;border-left: 0px;" @search="onSearch" />
          </div>
        </div>
        <div class="table">
          <a-table :columns="columns" :data-source="data" @change="onTbaleChange" :row-selection="rowSelection" :scroll="{ x: 2000, y: 1000 }"
            :pagination="false">
            <template #status="{ record }">
              <a-tag color="green" v-if="record.status === true">正常</a-tag>
              <a-tag color="red" v-else>空仓</a-tag>
            </template>
            <template #action="{ record }">
              <span class="crm_span" @click="showDrawer(record)">查看</span>
              <a-drawer v-model:visible="visible" width="1200"  class="custom-class"  placement="right"
                @after-visible-change="afterVisibleChange">
                <div class="base">
                  <div class="info">
                    <div class="title">
                      <div class="name">{{ record.name}}</div>
                      <div class="user">
                        (
                        <span>线索ID：{{ record.id}}；</span>
                        <span class="logoin">转化为客户</span>
                        )
                      </div>
                      <div class="users">转为客户将自动注册企业会员</div>
                    </div>
                    <div class="details">
                      <div class="detail-line">
                        <div class="detail-col">
                          <label class="line_label">所属销售:</label>
                          <span class="text">{{ record.admin_username }}</span>
                        </div>
                        <div class="detail-col">
                          <label class="line_label">跟进记录:</label>
                          <span class="text">{{ record.follow_count }}</span>
                        </div>
                        <div class="detail-col">
                          <label class="line_label">最后跟进:</label>
                          <span class="text">{{ record.not_following_day }}</span>
                        </div>
                      </div>
                      <div class="detail-line">
                        <div class="detail-col">
                          <label class="line_label">所在地区:</label>
                          <span class="text">{{ record.district }}</span>
                        </div>
                        <div class="detail-col">
                          <label class="line_label">创建人:</label>
                          <span class="text">{{ record.creat_username }}</span>
                        </div>
                        <div class="detail-col">
                          <label class="line_label">创建时间:</label>
                          <span class="text">{{ record.createtime }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tab_box">
                    <a-tabs v-model:activeKey="activeKey" tabBarStyle="background: #fcfcfc;border-top: 1px solid #ebeef5;border-bottom: 1px solid #ebeef5;padding:0px 20px">
                      <a-tab-pane key="1" tab="跟进记录">
                        <div class="tabs_content">
                          <div class="write">
                              <a-form  ref="formRef" style="width:500px"  :label-col="labelCol" :model="addFollowcountForm" :rules="addFollowcountrules"  @finish="handleFinish"
                                @finishFailed="handleFinishFailed"  labelAlign="right">
                                <a-form-item has-feedback label="跟进方式" name="method">
                                  <a-select ref="select" v-model:value="addFollowcountForm.value1" @focus="focus" @change="handleChange" style="margin-left: 10px"
                                    placeholder="请选择">
                                    <a-select-option value="当面拜访">当面拜访</a-select-option>
                                    <a-select-option value="电话拜访">电话拜访</a-select-option>
                                    <a-select-option value="网络拜访">网络拜访</a-select-option>
                                    <a-select-option value="其它拜访">其它拜访</a-select-option>
                                  </a-select>
                                </a-form-item>
                                <a-form-item has-feedback label="联系人" name="checkPass">
                                  <a-input v-model:value="addFollowcountForm.contacts" style="margin-left: 10px"/>
                                </a-form-item>
                                <a-form-item has-feedback label="跟进结果" name="age">
                                  <a-textarea v-model:value="addFollowcountForm.age" allow-clear style="margin-left: 10px" :rows="9" />
                                </a-form-item>
                                <a-form-item has-feedback label="添加图片" name="age">
                                  <a-upload-dragger v-model:fileList="fileList" name="file" :multiple="true"
                                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76" @change="handleChange1"
                                    style="margin-left: 10px; height: 180px">
                                    <p class="ant-upload-drag-icon">
                                      <img src="../../imgs/上传.png" alt="" />
                                    </p>
                                    <p class="ant-upload-text">
                                      将图片拖到此处, 或<a>点击上传</a>
                                    </p>
                                    <p class="ant-upload-hint">图片上传仅支持jpg/png格式</p>
                                  </a-upload-dragger>
                                </a-form-item>
                                <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                                  <a-button type="primary" html-type="submit"
                                    style="margin-left: 10px;height: 38px;border-radius: 5px;background-color: #559eff;width: 126px;">保存跟进记录</a-button>
                                </a-form-item>
                              </a-form>
                          </div>
                          <div class="history">
                            <div class="history_title">
                              <span class="history_text">历史跟进</span>
                              <div class="history_total">
                                共有
                                <span class="history_sum">0条</span>
                                跟进
                              </div>
                            </div>
                            <div class="history_list"></div>
                          </div>
                        </div>
                      </a-tab-pane>
                      <a-tab-pane key="2" tab="线索详情">
                        <div class="threaddetails_form" >
                          <a-form :rules="threadDetailsRules" :model="threadDetailsForm" :label-col="labelCol">
                            <a-form-item label="线索名称" name="name">
                              <a-input v-model:value="threadDetailsForm.name" />
                            </a-form-item>
                            <a-form-item label="联系人" name="contacts">
                              <a-input v-model:value="threadDetailsForm.contacts" />
                            </a-form-item>
                            <a-form-item label="联系手机" name="mobile">
                              <a-input v-model:value="threadDetailsForm.mobile" />
                            </a-form-item>
                            <a-form-item label="联系微信">
                              <a-input v-model:value="threadDetailsForm.weixin" />
                            </a-form-item>
                            <a-form-item label="公司规模">
                              <a-select>
                                <a-select-option value='20人以下'>20人以下</a-select-option>
                                <a-select-option value='20-99人'>20-99人</a-select-option>
                                <a-select-option value='20-99人'>100-499人</a-select-option>
                              </a-select>
                            </a-form-item>
                            <a-form-item label="所属行业" >
                              <a-select v-model:value="threadDetailsForm.trade">
                                <a-select-option value='电子/半导体/集成电路'>电子/半导体/集成电路</a-select-option>
                              </a-select>
                            </a-form-item>
                            <a-form-item label="所在地区">
                              <a-select v-model:value="threadDetailsForm.district">
                                <a-select-option value='吉林省'>吉林省</a-select-option>
                              </a-select>
                            </a-form-item>
                            <a-form-item label="详细地址">
                              <a-input v-model:value="threadDetailsForm.address" />
                            </a-form-item>
                            <a-form-item label="备注">
                              <a-textarea v-model:value="threadDetailsForm.remark" allow-clear />
                            </a-form-item>
                            <a-form-item >
                              <a-button type="primary" style="width:130px;height:40px">保存</a-button>
                              <a-button type="primary" style="margin-left: 10px;width:130px;height:40px">转化为客户</a-button>
                            </a-form-item>
                          </a-form>
                        </div>
                      </a-tab-pane>
                    </a-tabs>
                </div>
              </a-drawer>
            </template>
          </a-table>
        </div>
        <div class="row">
          <div class="row-button">
            <a-button type="primary">全选/反选</a-button>
            <a-button type="primary">导出</a-button>

          </div>
          <div class="row-pagination">
            <a-pagination v-model:current="current1" show-quick-jumper :total="1" :show-total="total => `Total ${total} items`"
              @change="onChange" />
          </div>
        </div>
      </div> 
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref, reactive } from "vue"
import { HomeOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue';
import { useRoute } from "vue-router"

export default defineComponent({
  components: {
    HomeOutlined
  },
  computed: {

  },
  emits: [],
  props: {
  },
  setup() {

    const searchlist = reactive({
      
      input_inner: '线索名称',
      search_value: ""
    });


    const threadDetailsForm =  reactive({
      name:'',
      contacts:'',
      mobile:'',
      weixin:'',
      trade:'',
      district:'',
      address:'',
      remark:''
    });

    const current1 = ref(1);

    const onChange = (number) => {
      console.log('Page: ', pageNumber);
    };

    const addFollowcountForm = reactive({
      name: '',
      contacts: '',
      mobile: '',
      weixin: '',
      trade: '',
      district: '',
      address: '',
      remark: ''
    });


    const handleSearchChange = () => {

    }

    const onSearch = (searchValue) => {
      console.log('use value', searchValue);
      console.log('or use this.value', value.value);
    };

    const rowSelection = ref({
      checkStrictly: false,
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      },
      onSelect: (record, selected, selectedRows) => {
        console.log(record, selected, selectedRows);
      },
      onSelectAll: (selected, selectedRows, changeRows) => {
        console.log(selected, selectedRows, changeRows);
      },
    });

    const visible = ref(false);

    const afterVisibleChange = bool => {
      console.log('visible', bool);
    };

    const showDrawer = (record) => {
      visible.value = true;
      threadDetailsForm.name = record.name
      threadDetailsForm.contacts = record.contacts
      threadDetailsForm.mobile = record.mobile
      threadDetailsForm.weixin = record.weixin
      threadDetailsForm.trade = record.trade
      threadDetailsForm.district = record.district
      threadDetailsForm.address = record.address
      threadDetailsForm.remark = record.remark
    };

    const formRef = ref();

    const addfollowcountform = reactive({
      username: '',
      mobile: '',
      password: ''
    });

    const threadDetailsRules = {
      name: [{ required: true, message: '请输入线索名称', trigger: 'blur' }],
      contacts: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
      mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
    };

    // 获取到的路由参数
    const Route = useRoute(); //获取到值
    onMounted(() => {

    })
    const columns = [{
      title: '线索id',
      dataIndex: 'id',
      key: 'id',
    }, {
      title: '线索名称',
      dataIndex: 'name',
      key: 'name',
    }, {
      title: '所属销售',
      dataIndex: 'admin_username',
      key: 'admin_username',
      filters: [{
        text: 'Joe',
        value: 'Joe',
      }, {
        text: 'Jim',
        value: 'Jim',
      }, {
        text: 'Submenu',
        value: 'Submenu',
        children: [{
          text: 'Green',
          value: 'Green',
        }, {
          text: 'Black',
          value: 'Black',
        }],
      }],
      // specify the condition of filtering result
      // here is that finding the name started with `value`
      onFilter: (value, record) => record.name.indexOf(value) === 0,
      // sorter: (a, b) => a.name.length - b.name.length,
      sortDirections: ['descend']
    }, {
      title: '联系人',
      dataIndex: 'contacts',
      key: 'contacts',
    }, {
      title: '联系电话',
      dataIndex: 'mobile',
      key: 'mobile',
    }, {
      title: '联系微信',
      dataIndex: 'weixin',
      key: 'weixin',
    }, {
      title: ' 客户行业',
      dataIndex: 'trade',
      key: 'trade',
      filters: [{
        text: 'Joe',
        value: 'Joe',
      }, {
        text: 'Jim',
        value: 'Jim',
      }, {
        text: 'Submenu',
        value: 'Submenu',
        children: [{
          text: 'Green',
          value: 'Green',
        }, {
          text: 'Black',
          value: 'Black',
        }],
      }],
      // specify the condition of filtering result
      // here is that finding the name started with `value`
      onFilter: (value, record) => record.name.indexOf(value) === 0,
      // sorter: (a, b) => a.name.length - b.name.length,
      sortDirections: ['descend']
      }, {
        title: ' 所在地区',
        dataIndex: 'district',
        key: 'district',
        filters: [{
          text: 'Joe',
          value: 'Joe',
        }, {
          text: 'Jim',
          value: 'Jim',
        }, {
          text: 'Submenu',
          value: 'Submenu',
          children: [{
            text: 'Green',
            value: 'Green',
          }, {
            text: 'Black',
            value: 'Black',
          }],
        }],
        // specify the condition of filtering result
        // here is that finding the name started with `value`
        onFilter: (value, record) => record.name.indexOf(value) === 0,
        // sorter: (a, b) => a.name.length - b.name.length,
        sortDirections: ['descend']
      },
       {
        title: '详细地址',
        dataIndex: 'address',
         key: 'address',
      },
      {
        title: '更新时间',
        dataIndex: 'updatetime',
        key: 'updatetime',
      },
      {
        title: '跟进(次)',
        dataIndex: 'follow_count',
        key: 'follow_count',
      },
      {
        title: '创建人',
        dataIndex: 'creat_username',
        key: 'creat_username',
        filters: [{
          text: 'Joe',
          value: 'Joe',
        }, {
          text: 'Jim',
          value: 'Jim',
        }, {
          text: 'Submenu',
          value: 'Submenu',
          children: [{
            text: 'Green',
            value: 'Green',
          }, {
            text: 'Black',
            value: 'Black',
          }],
        }],
        // specify the condition of filtering result
        // here is that finding the name started with `value`
        onFilter: (value, record) => record.name.indexOf(value) === 0,
        // sorter: (a, b) => a.name.length - b.name.length,
        sortDirections: ['descend']
      },
      {
        title: '备注',
        dataIndex: 'remark',
        key: 'remark',
      },
    {
      title: '操作',
      key: 'action',
      fixed: 'right',
      width: 120,
      slots: { customRender: 'action' },
    }];
    const data = [{
      key: '1',
      id: 134,
      name:'线索1',
      admin_username:'admin',
      contacts:'快乐小驴',
      mobile: 13567890987,
      weixin:'4324qweas',
      trade:'其他行业',
      district:'吉林省四平市梨树县',
      address:'喇嘛甸镇柳树营村二组',
      updatetime: '2022-12-05 18:54',
      follow_count:'0',
      creat_username:'管理员',
      remark: '11',
      not_following_day:'从未跟进',
      createtime:'2022-12-04 20:35'
    }];
    return {
      data,
      columns,
      current1,
      searchlist,
      onChange,
      onSearch,
      handleSearchChange,
      rowSelection,
      visible,
      afterVisibleChange,
      showDrawer,
      activeKey: ref('1'),
      formRef,
      addfollowcountform,
      threadDetailsForm,
      labelCol: { style: { width: '120px' } },
      threadDetailsRules,
      addFollowcountForm
    }
  }
})
</script>


<style>

</style>